<template>
  <div class="appeal-item-content" :class="item.color">
    <div class="top flex-start">
      <div class="img flex-center" :class="{'img-chart': item.type=='pie'}">
        <img :src="item.icon" alt="">
        <div class="chart-wrap" v-if="item.type=='pie'">
          <van-circle v-model:current-rate="currentRate" :rate="item.num" :speed="100" :stroke-width="120" :stroke-linecap="'butt'" :layer-color="layerColor" :color="gradientColor"/>
        </div>
      </div>
      <div class="title">
        <p>{{item.title}}</p>
        <p class="num">
          {{item.num}} 
          <span class="unit" v-if="item.unit">{{item.unit}}</span>
          <span v-else>%</span>
        </p>
      </div>
    </div>
    <div class="bottom flex">
      <span>环比</span>
      <div class="nan" v-if="item.rate=='-'||item.rate=='--'">
        <span class="num">{{item.rate}}</span>
      </div>
      <div v-else>
        <span class="icon icon-huan-up" v-if="item.rate>0"></span>
        <span class="icon icon-huan-down" v-else></span>
        <span class="num">{{Math.abs(item.rate)}}%</span>
      </div>
      <router-link class="link-more" v-if="item.url" :to="item.url">
        <img class="icon-more" src="@/assets/event/icon-more.png" alt="">
      </router-link>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed, ref, reactive, toRefs, watch, onActivated, onMounted } from 'vue'

defineOptions({
  name: 'AppealItem'
})

const props = defineProps({
  item: {
    type: Object,
    default: {}
  }
})
const currentRate = ref(0);
const gradientColor = ref({});
const layerColor = ref('');
watch(
  () => props.item,
  (val) => {
    if(val.color == 'orange'){
      gradientColor.value = {
        '0%': '#FF7629', 
        '100%': '#FF9929',
      }
      layerColor.value = '#FF762933'
    }

    if(val.color == 'blue'){
      gradientColor.value = {
        '0%': '#1191E0', 
        '100%': '#00A7FE',
      }
      layerColor.value = '#1191E033'
    }

    if(val.color == 'green'){
      gradientColor.value = {
        '0%': '#25CF88', 
        '100%': '#5DE1A2',
      }
      layerColor.value = '#25CF8833'
    }
  }, { deep: true }
);

</script>

<script lang="ts">

</script>

<style lang="less" scoped>
.appeal-item-content{
  position: relative;
  border-radius: 5px;
  padding: 9px 10px;
  background: #fff;
  margin: 0 0 10px 0;
  width: 147.5px;
  color: #212121;
  border: 1.5px solid #FFFFFF;
  box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.05);
  &.blue{
    background: linear-gradient(107.7deg, rgba(240, 253, 255,1) 0%, rgba(255, 255, 255, 1) 60%, rgba(255, 255, 255, 1) 100%);
  }
  &.orange{
    background: linear-gradient(108.08deg, rgb(254, 242, 234) 0%, rgba(255, 255, 255,1) 60%, rgba(255, 255, 255, 1) 100%);
  }
  &.green{
    background: linear-gradient(107.93deg, rgb(237, 254, 238) 0%, rgba(255, 255, 255,1) 60%, rgba(255, 255, 255, 1) 100%);
  }
  .chart-wrap{
    width: 45px;
    height: 45px;
    position: absolute;
    :deep(.van-circle){
      width: 100%;
      height: 100%;
    }
  }
  .top{
    border-bottom: 1px solid rgba(61, 118, 204, 0.2);
    padding-bottom: 8px;
    .img{
      width: 45px;
      height: 45px;
      margin-right: 9px;
      img{
        width: 45px;
        height: 45px;
      }
      &.img-chart{
        img{
          width: 18px;
          height: 18px;
        }
      }
    }
    .title{
      p:first-child{
        font-size: 14px;
        margin-bottom: 8px;
      }
      .num{
        color: #1F2733;
        font-weight: 900;
        font-size: 18px;
        font-family: DINPro;
        .unit{
          font-size: 11px;
          color: #666;
          font-weight: 400;
          font-family: 'PingFang SC';
        }
      }
    }
  }
  .bottom{
    margin-top: 10px;
    font-size: 11px;
    .icon{
      margin-left: 5px;
    }
    .num{
      font-size: 14px;
      color: #272B33;
    }
    .icon-more{
      width: 20px;
      height: 20px;
      position: absolute;
      bottom: 5px;
      right: 8px;
    }
    .link-more{
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
    }
  }
  .nan{
    margin-left: 3px;
  }
}
</style>

